<template>
    <div class="mesboard">
        <!-- 留言板头部 -->
        <MesboardHead />
        <!-- 评论 -->
        <AboutComment :comment="comment" />
        <left-layout> </left-layout>
        <!-- 推荐阅读列表组件 -->
        <MesboardList :list="articleList" />
        <!-- 底部  -->
        <Footer />
    </div>
</template>

<script>
import MesboardHead from '@/components/mesboard/MesboardHead';
import MesboardList from '@/components/mesboard/MesboardList';
import AboutComment from '@/components/About/AboutComment';
import LeftLayout from '@/components/LeftLayout';
import Footer from '@/components/Footer';
import { mapActions, mapState } from 'vuex';

export default {
    components: {
        MesboardHead,
        MesboardList,
        AboutComment,
        Footer,
        LeftLayout,
    },
    data() {
        return {
            desc: '',
            expression: false,
        };
    },
    computed: {
        ...mapState({
            articleList: (state) => state.article.articleList,
            pageData: (state) => state.about.pageData,
            comment: (state) => state.about.comment,
        }),
    },
    mounted() {
        this.getComment();
        this.getArticleList();
    },
    methods: {
        ...mapActions({
            getComment: 'about/getComment',
            getArticleList: 'article/getArticleList',
        }),
        //鼠标划入 表情高亮
        remove() {
            this.expression = true;
        },
        //鼠标划出 表情失去高亮
        remout() {
            this.expression = false;
        },
    },
    watch: {},
};
</script>

<style scoped lang="scss">
.mesboard {
    background-color: var(--bg-body);
}
.mesboardList {
    margin-bottom: 10px;
}
</style>
